<template>
  <div>
    <el-dialog :title="types=='add'?'新增':'修改'" :visible="isShow" :before-close="close" width="60%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上级目录" prop="pid">
          <el-select v-model="ruleForm.pid" placeholder="请选择活动区域">
            <el-option label="顶级目录" :value="0"></el-option>
            <el-option :label="cate.catename" :value="cate.id" v-for="(cate,index) in cateOptions" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="catename">
          <el-input v-model="ruleForm.catename"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <!-- action 上传的地址 -->
          <!-- limit 上传的数量限制 -->
          <!-- on-exceed 超出限制时执行的函数 -->
          <!-- auto-upload 自动上传 这里的接口是所有数据一起上传 所以关闭自动上传 -->
          <!-- on-change 文件变化时的钩子 -->
          <!-- file-list 历史文件的列表 -->
          <el-upload action="#" list-type="picture-card" :limit="3" :on-exceed="handleExceed" :auto-upload="false" :on-change="handleChange" :file-list="fileList">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button @click="submit" type="primary">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCateListTree, addCate, editCate } from '@/api/index'
export default {
  name: 'MyWin',
  props: ['isShow', 'types'],
  data () {
    return {
      // 上传过的历史文件
      fileList: [],
      // 下拉的数据
      cateOptions: [],
      ruleForm: {
        pid: 0,
        catename: '',
        status: '1'
      },
      rules: {
        catename: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    // 发请求 获取下拉菜单的数据
    this.getCatelist()
  },
  methods: {
    close () {
      this.$emit('close')
    },
    submit () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          // 只要请求中可能包含图片 就需要将数据类型转为formdata 提交给后台的就是这个类型的数据
          const fd1 = new FormData()
          // 现在的fd1是空的 数据来源是ruleForm 需要将ruleForm中的数据存入fd1 并提交
          // 遍历ruleForm 将数据存入fd1
          for (const key in this.ruleForm) {
            fd1.append(key, this.ruleForm[key])
          }
          // fd1.forEach((v,k) => { // 这个代码是演示如何查看fd中的数据 不能直接log
          //   console.log(k, v);
          // })
          let res
          // 先判断新增还是修改
          if (this.types === 'add') {
            res = await addCate(fd1)
          } else {
            res = await editCate(fd1)
          }
          if (res.code === 200) {
            this.$emit('update')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // 调用关闭函数
      this.close()
    },
    setVal (data) {
      this.fileList = [] // 清空上次的图片
      // 给表单项赋值
      this.ruleForm = { ...data }
      // 处理一下图片的显示
      if (data.img) {
        // 有图片时才会向fileList中添加内容，在页面上显示
        this.fileList.push({
          name: 'food.jpeg',
          url: 'http://localhost:3000' + data.img
        })
      }
    },
    async getCatelist () {
      const res = await getCateListTree()
      this.cateOptions = res.list
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleChange (file) {
      // 这里获取了文件
      this.ruleForm.img = file.raw
    }
  }
}
</script>

<style lang="less" scoped>
</style>
